<template>
  <div class="customer-dynamic">
    <div v-if="id && detailAuth">
      <div class="dynamic-btn" @click="showCustomerDynamic">
        <i class="V7_iconfont V7_iconV7tubiao_kehudongtai"></i>
        <span>客户动态</span>
      </div>
      <CustomerDetail
        ref="CustomerEdit"
        :id="id"
        :wecaht="true"
        @updateCusInfo="updateCusInfo"
      />
    </div>
    <div v-if="inputAuth && !id">
      <!-- <p style="margin-top: 20px">客户标签</p>
      <addLabel
        :labelData="labelData"
        :labelArr="labelArr"
        :customerLabelShow="true"
        @addCutomerLabels="addCutomerLabels"
      /> -->
      <AddCustomer
        ref="AddCustomer"
        :afterShow="false"
        @updateRelationCusInfo="updateRelationCusInfo"
      />
      <el-button type="primary" @click="saveNewCustomer"
        >保存为新客户</el-button
      >
    </div>
    <div v-show="!inputAuth && !id">
      <div class="no-data"></div>
      <p class="no-auth">无权限录入客户</p>
    </div>
    <div v-show="!detailAuth && id">
      <div class="no-data"></div>
      <p class="no-auth">无权限查看</p>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="700px" :modal="false">
      <div slot="title">
        <i class="el-icon-s-claim"></i>
        <span>客户动态</span>
      </div>
      <CustomerRecord
        ref="CustomerRecord"
        :customerId="id"
        :titleShow="false"
        :busCategory="busCategory"
      />
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Ref, Watch } from 'vue-property-decorator'
import CustomerForm from '@/views/newCustomer/components/customerForm.vue'
import CustomerDistribute from '@/views/newCustomer/components/customerDistribute.vue'
import addLabel from '@/components/addLabel/index.vue'
import CustomerDetail from '@/views/newCustomer/components/customerEdit.vue'
import CustomerRecord from '@/views/newCustomer/components/customerRecord.vue'
import CustomerAllDetail from '@/views/newCustomer/drawer/customerDetail.vue'
import AddCustomer from '@/views/newCustomer/drawer/addCustomer.vue'
import { checkPermission } from '@/utils/directive'
@Component({
  name: 'CustomerDynamic',
  components: { AddCustomer, CustomerAllDetail, CustomerRecord, CustomerDetail, CustomerForm, CustomerDistribute, addLabel }
})
export default class CustomerDynamic extends Vue {
  [x: string]: any
  @Ref() private readonly CustomerEdit
  @Ref() private readonly CustomerRecord
  @Ref() private readonly AddCustomer
  @Prop() private newCusDetailData
  @Prop() private id
  @Prop() private inputType
  @Prop({ default: {} }) private commonData!: any
  @Prop() private busCategory

  private dialogVisible: boolean = false

  private inputAuth: boolean = true

  private detailAuth: boolean = true

  // private labelData: any = []

  // private labelArr: any = []

  // private addCutomerLabels (val: any) {
  //   this.labelArr = val
  // }
  @Watch('commonData', { immediate: true })
  private commonDataChange (newData) {
    this.$nextTick(() => {
      if (this.AddCustomer) {
        this.AddCustomer.updatePhone(newData)
      }
    })
  }

  private updateCusInfo (res: any) {
    this.$emit('updateChatCard')
    this.$emit('afterAddCustRecord', {
      id: res.id,
      name: res.name,
      labels: res.labels
    })
  }

  private async updateRelationCusInfo (res: any) {
    await this.$emit('afterAddCustRecord', {
      id: res.data._id,
      name: res.data.name,
      labels: res.data.labels
    })
    await this.$emit('getNewCusDetail') // 获取客户详情
  }

  private saveNewCustomer () {
    const wechat = Boolean(this.inputType === 'WEBCHAT')
    // this.AddCustomer.saveForm(wechat, this.labelArr)
    this.AddCustomer.saveForm(wechat)
  }

  private showCustomerDynamic () {
    this.dialogVisible = true
    this.$nextTick(() => {
      this.CustomerRecord.searchDy() // 客户动态
    })
  }

  public async init () {
    if (this.id && this.detailAuth) { // 客户存在显示详情
      await this.$getCache('/server-crm/action/customer/common/panel/detail', ['customerDetailConfig'], false, false, false, 'GET', false, 'data.fields')
      this.$nextTick(() => {
        this.CustomerEdit.initData(this.newCusDetailData)
      })
    } else if (!this.id && this.inputAuth) { // 客户不存在显示新增
      // this.labelData = (CommonModule as any).publicCache.customerAllLabels
      this.AddCustomer.initData()
    }
  }

  private created () {
    if (checkPermission(null, { value: ['customer_insert'] })) {
      this.inputAuth = true
    } else {
      this.inputAuth = false
    }
    if (checkPermission(null, { value: ['customer_edit'] })) {
      this.detailAuth = true
    } else {
      this.detailAuth = false
    }
  }

  private mounted () {
    this.init()
  }
}
</script>
<style lang="stylus" scoped>
.no-data
  background url('../../../assets/img/noPermission.png') no-repeat center center
  width 100%
  height 200px
  background-size 267px auto
.no-auth
  margin-top 10px
  color #767E91
  text-align center
>>> .el-dialog__body
  padding 0 24px 24px 24px
>>> .el-form
  display block
  margin 0
  .el-form-item
    margin-left 0 !important
    .el-select
      width 100%
>>> .el-dialog__header
  margin-bottom 1px solid #E7E9ED
.customer-dynamic
  overflow auto
  i
    margin-right 6px
  .title
    margin 20px 0 16px
    color #303753
  .dynamic-btn
    height 32px
    cursor pointer
    border 1px solid #E7E9ED
    border-radius 4px
    color #008BEE
    display flex
    align-items center
    justify-content center
  .el-button
    width 100px
    height 32px
    float right
    margin 20px 0 5px
</style>
